<template>

  <div style="background-color: #f5fdff">
    <div class="poster">
      <div class="search">
        <el-input type="text" style="width: 80%;height: 6%" placeholder="输入搜索岗位"></el-input>
        <el-button>搜索</el-button>
      </div>
    </div>

    <div style="width: 70%;margin:  1% auto;background-color: aliceblue;text-align: left">
      <div v-for="i in 5" class="property-item">
        <div style="margin: 3px 0">房地产/物业类</div>
        <span v-for="i in 5" style="color: #888888">
          <el-link underline="hover" style="color:#888888;">房地产开发/策划专员</el-link> |
          <el-link underline="hover" style="color:#888888;">房地产/物业类</el-link> |
          <el-link underline="hover" style="color:#888888;">房地产/物业类</el-link> |
        </span>
      </div>
    </div>

    <div style="width: 70%;margin:1% 0 1% 15%;background-color:white;text-align: left;padding:1% 1% 1% 0%;">
      <el-row style="margin-left: 1%">
        <el-col :span="2">
          热门岗位
        </el-col>
        <el-col :span="2">
          全职
        </el-col>
        <el-col :span="4">
          实习
        </el-col>
      </el-row>
        <el-row  :gutter="24">
          <el-col v-for="i in 9" :span="8">
            <el-card style="margin: 3% ">
              <el-row>
                <el-col :span="12">运营总监</el-col>
                <el-col :span="12" style="text-align: right;color: #888888;font-size: 15px">9月5日</el-col>
              </el-row>
              <el-row style="margin-top: 3%;">
                <el-col :span="8" style="color: #ec852c;font-size: 25px;">20-25K</el-col>
                <el-col :span="12" style=";color: #888888;font-size: 15px;padding-top: 5px">经验3-5年/学历不限</el-col>
              </el-row>
              <hr>
              <el-row>
                <el-col :span="5">
                  <div style="width: 76%;border: 1px #888888 solid; border-radius: 7px;overflow: hidden;"><img src="../../assets/jdimg/log.png" style="width: 100%;"></div>
                </el-col>
                <el-col :span="10">
                  <div style="margin-top: 8%">趣店</div>
                  <div style="color:#888888;font-size: 15px;">IT|通信|电子互联网</div>
                </el-col>
                <el-col :span="9"><el-button style="margin-top: 10%;float: right">投一个呗</el-button></el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      <el-button type="primary" style="text-align: center;width: 20%;margin-left: 40%">查看更多</el-button>
      </div>

    <div style="width: 70%;margin:1% 0 1% 15%;background-color:white;text-align: left;padding:1% 1% 1% 0%;">
      <el-row style="margin-left: 1%">
        <el-col :span="2">
          热门公司
        </el-col>
      </el-row>
      <el-row  :gutter="24">
        <el-col v-for="i in 9" :span="8">
          <el-card style="margin: 3% ">
            <el-row>
              <el-col :span="5">
                <div style="width: 76%;border: 1px #888888 solid; border-radius: 7px;overflow: hidden;"><img src="../../assets/jdimg/log.png" style="width: 100%;"></div>
              </el-col>
              <el-col :span="10">
                <div style="margin-top: 8%">京东</div>
                <div style="color:#888888;font-size: 15px;">IT|通信|电子互联网</div>
              </el-col>
            </el-row>
            <div style="
            width:100%;
            color: #888888;
            font-size: 13px;
            display: -webkit-box;
            -webkit-line-clamp: 2; /* 限制行数 */
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
              ">京东（JD.com）是中国领先的自营式B2C电商平台，以正品保障和高效的自建物流体系著称，2023年位列《财富》世界500强第52位，业务涵盖家电、数码、生鲜等全品类商品。</div>
            <hr>
            <el-button style="margin-top: 5%;float: right;margin-left: 2%;margin-bottom: 4%">全职职位</el-button>
            <el-button style="margin-top: 5%;float: right">实习职位</el-button>
          </el-card>
        </el-col>
      </el-row>
      <el-button type="primary" style="text-align: center;width: 20%;margin-left: 40%">查看更多</el-button>
    </div>
    <div style="width: 70%;margin:1% 0 1% 15%;background-color:white;text-align: left;padding:1% 1% 1% 0%;">
      <el-button  @click="currentComponent = 'citryView'" type="primary" style="margin-right: 2%;margin-left: 2%">热门城市</el-button>
      <el-button  @click="currentComponent = 'linkView'" type="primary">友情链接</el-button>
      <hr>
      <div style="
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          align-content: space-around;
          align-items: stretch;"
           v-if="currentComponent==='citryView'"
      >
        <div style="width: 70px;text-align: center;margin: 10px;font-size:20px " v-for="i in 50" >
          <el-link underline="never" >上海人才网</el-link>
        </div>
      </div>
      <div style="
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          align-content: space-around;
          align-items: stretch;"
           v-if="currentComponent==='linkView'"
       >
        <div style="width: 70px;text-align: center;margin: 10px;font-size:20px " v-for="i in 50" >
          <el-link underline="never" >boss直聘</el-link>
        </div>
      </div>
    </div>
  </div>

</template>
<script setup>
import {ref} from "vue";

const currentComponent = ref(
    'citryView'
)
</script>

<style scoped>
.poster{
  width: 100vw;
  height: 53vh;
  background-image: url("../../assets/poster.png");
  position: relative;
  background-position: center;
}
.search{
  width: 16%;
  position: absolute;
  top: 80%;
  left: 41%;
}
.property-item {
  width: 100%;
  background-color: #ffffff;
  margin: 2px auto;
  padding: 10px;
  transition: box-shadow 0.3s ease; /* 添加过渡效果 */
}

.property-item:hover {
  box-shadow: 0 0 15px rgba(232, 255, 254, 0.3); /* 绿色调的阴影 */
  transform: translateY(-1px); /* 可选：轻微上浮效果 */
}
</style>